<template>
    <div class="tms-ag-grid-floating-filter">
        <el-date-picker v-model="currentValue" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            @change="valueChanged">
        </el-date-picker>
    </div>
</template>
<script>
import Vue from 'vue'
import { DatePicker } from 'element-ui'
Vue.use(DatePicker)
export default Vue.extend({
    name: 'DateFloatingFilter',
    data() {
        return {
            currentValue: '',
        }
    },
    mounted() {
    },
    methods: {
        valueChanged(val) {
            this.currentValue = Object.assign([], val)
            let _self = this
            this.params.parentFilterInstance((instance) => {
                let valueToUse = []
                if (val === null || val === undefined || val.length === 0) {
                    valueToUse = []
                } else {
                    valueToUse = Object.assign([], val)
                }
                let tmpModel = {
                    filterType: 'date',
                    type: 'inRange',
                    dateFrom: valueToUse[0],
                    dateTo: valueToUse[1]
                }
                instance.setModel(tmpModel)
                this.params.api.onFilterChanged()
            })
        },
        onParentModelChanged(parentModel) {
            this.currentValue = !parentModel ? [] : [parentModel.dateFrom, parentModel.dateTo]
        },
    }
})
</script>
<style>
.tms-ag-grid-floating-filter .el-range-editor--mini.el-input__inner {
    height: 27px;
}
</style>